<!-- 首页 -->
<template>
	<view>
		<tui-bottom-popup :zIndex="9999" :show="vuex_auth" @close="close">
			<view class="title">资料设置</view>
			<view class="form-box">
				<view class="form-page">
					<view class="form-item">
						<view class="form-label">性别</view>
						<view v-if="vuex_user.sex == ''" class="form-set" @click="actionSheetShow = true">去设置</view>
						<view v-else class="form-text" @click="actionSheetShow = true">
							<view>{{sexLabel}}</view>
						</view>
					</view>
					<u-line></u-line>
					<view class="form-item">
						<view class="form-label">出生日期</view>
						<view v-if="!birthDate" class="form-set" @click="ageOpen">去设置</view>
						<view v-else class="form-text" @click="ageOpen">{{birthDate}}</view>
					</view>
				</view>
				
				<view class="btn-box">
					<u-button type="primary" @click="updateUser">完成</u-button>
				</view>
			</view>
		</tui-bottom-popup>
		
		<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
		<tui-datetime :zIndex="99999" title="出生日期" unitTop radius ref="dateTime" :endYear="2010" :type="2" @confirm="birthConfirm"></tui-datetime>
	</view>
</template>

<script>
import tuiBottomPopup from "@/components/thorui/tui-bottom-popup/tui-bottom-popup.vue"
import tuiDatetime from "@/components/thorui/tui-datetime/tui-datetime.vue"
export default {
	components: {
		tuiBottomPopup,
		tuiDatetime
	},
	props: {
		title: {
			type: String,
			default () {
				return "每邀请一人可领取200趣豆";
			}
		},
		btnText: {
			type: String,
			default () {
				return "转发好友";
			}
		},
	},
	data() {
		return {
			actionSheetShow: false,
			sexLabel: '',
			birthDate: null,
			actionSheetList: [
				{
					text: '男',
					value: '0',
				},
				{
					text: '女',
					value: '1',
				},
			],
		};
	},
	computed: {
		vuex_auth: {
		    get() {
		      return this.$store.state.vuex_auth;
		    },
		    set(value) {
		      this.$store.commit('setAuth', value);
		    }
		},
		vuex_user: {
			get() {
			  return this.$store.state.vuex_user;
			},
			set(value) {
			  this.$store.commit('setUser', value);
			}
		},
	},
	created() {
		var that = this;
		that.actionSheetList.forEach(function(item) {
		    if(item.value == that.$store.state.vuex_user.sex){
				that.sexLabel = item.text;
			}
		});
	},
	methods: {
		// 点击actionSheet回调
		actionSheetCallback(index) {
			var sex = this.actionSheetList[index].value;
			this.sexLabel = this.actionSheetList[index].text;
			this.$u.put('/system/user/profile',{
				sex: sex
			}).then(res => {
				var user = this.$store.state.vuex_user;
				user.sex = sex;
				this.$store.commit('setUser', user);
			})
		},
		updateUser() {
			if(this.vuex_user.sex == ''){
				uni.showToast({ title: '请设置性别', icon: 'none' });
				return;
			}
			if(this.birthDate == null){
				uni.showToast({ title: '请设置出生日期', icon: 'none' });
				return;
			}
			var age = this.calculateAge(this.birthDate);
			if(age < 18){
				uni.showModal({
					title: '温馨提示',
					content: '未成年人禁止参加！',
					showCancel: false,
					success: function(res) {
						
					}
				});
				return;
			}
			
			this.$u.put('/system/user/profile',{
				birthDate: this.birthDate
			}).then(res => {
				this.close();
			})
		},
		calculateAge(birthDateString) {
		    var today = new Date();
		    var birthDate = new Date(birthDateString);
		    var age = today.getFullYear() - birthDate.getFullYear();
		    var m = today.getMonth() - birthDate.getMonth();
		    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
		        age--;
		    }
		    return age;
		},
		ageOpen() {
			this.$refs.dateTime.show();
		},
		birthConfirm(e) {
			this.birthDate = e.result;
		},
		close() {
			this.$store.commit('setAuth', false);
		},
	}
}; 
</script>
<style lang="scss" scoped>
	.title {
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		padding: 15px;
	}
	
	.form-box {
		padding: 15px;
		padding-bottom: 100px;
	}
	
	.form-page {
		padding: 15px;
		background-color: #fff;
		margin-top: 15px;
		border-radius: 10px;
	}
	
	.form-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 0;
	}
	.form-label {
		font-size: 32rpx;
		width: 100px;
	}
	.form-text {
		font-size: 30rpx;
		color: #817e7e;
		display: flex;
		justify-content: flex-end;
		flex: 1;
		line-height: 15px;
	}
	
	.form-set {
		font-size: 30rpx;
		color: #929292bd;
		display: flex;
		justify-content: flex-end;
		flex: 1;
		line-height: 15px;
	}
	
	.btn-box{
		margin-top: 50rpx;
		margin-left: 15px;
		margin-right: 15px;
	}
</style>
